<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加文章</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="24">
      <el-col :span="18">
        <div class="grid-content">
          <el-col :span="18">
            <el-form>
              <el-form-item>
                <el-input type="text" placeholder="请输入文章标题" v-model="title"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="5">
            <el-form>
              <el-form-item>
                <el-select v-model="category" placeholder="请选择文章类别">
                  <el-option label="Es6" value="ES6"></el-option>
                  <el-option label="Git" value="GIT"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <el-col :span="20">
            <el-button @click="storage">暂存文章</el-button>
            <el-button type="primary" @click="pushStorage">更新文章</el-button>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="18">
        <el-col :span="12">
          <div class="edit" contenteditable="true" @input="contentChange">{{content}}</div>
        </el-col>
        <el-col :span="12">
          <div class="showArticle" v-html="markedContent"></div>
        </el-col>
      </el-col>
      <el-col :span="6">
        <el-form>
          <el-form-item>
            <el-input type="textarea" rows="10" placeholder="文章简介" v-model="intro"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="info" style="width:100%">{{info?info: '信息提示'}}</el-button>
          </el-form-item>
          <el-date-picker v-model="date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import marked from "marked";
export default {
  data() {
    return {
      markedContent: "",
      category: "",
      date: "",
      title: "",
      intro: "",
      content: "",
      info: "",
    };
  },
  created(){
      this.getParams()
  },
  methods: {
    contentChange(e) {
      this.content = e.target.innerHTML;
      console.log(this.content);
      this.markedContent = marked(this.content || "", { sanitize: true });
    },
    storage() {
      if (!this.category) {
        this.$message.error("请选择文章类别");
        return false
      }
      else if (!this.date) {
        this.$message.error("请选择发表时间");
        return false
      }
      else if (!this.title) {
        this.$message.error("请输入文章标题");
        return false
      }
      else if (!this.markedContent) {
        this.$message.error("请输入文章内容");
        return false
      }
      else if (!this.intro) {
        this.$message.error("请输入文章简介");
        return false
      }
    },
    pushStorage() {
      if (!this.category) {
        this.$message.error("请选择文章类别");
        return false
      }
      else if (!this.date) {
        this.$message.error("请选择发表时间");
        return false
      }
      else if (!this.title) {
        this.$message.error("请输入文章标题");
        return false
      }
      else if (!this.markedContent) {
        this.$message.error("请输入文章内容");
        return false
      }
      else if (!this.intro) {
        this.$message.error("请输入文章简介");
        return false
      }
      if (this.info != "已发表") {
        this.$axios({
          url: "/UpdateArticles",
          method: "post",
          data: {
            id: this.$route.params,
            title: this.title,
            category: this.category,
            addTime: this.date,
            content: this.content,
            introduce: this.intro,
          },
        }).then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            this.info = "已发表";
          }
        });
      }
    },
    getParams(){
        let data = this.$route.params
        console.log(data)
        this.$axios({
            method: 'post',
            url: '/getOneArticle',
            data: {
                _id: data.id
            }
        }).then((res)=>{
            console.log(res.data.data)
            let data = res.data.data
            this.title = data.title
            this.category = data.category
            this.date = data.addTime
            this.intro = data.introduce
            this.content = data.content
            this.markedContent = marked(this.content)
        })
        
    }
  },
  // watch:{
  //   date(newV,old){
  //     console.log(newV)
  //   }
  // }
};
</script>

<style lang="stylus" scoped>
.el-row {
  margin-bottom: 10px;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 50px;
}

.edit {
  overflow-y: scroll;
  background: white;
  border-radius: 5px;
  height: 1000px
}

.showArticle {
  overflow-y: scroll;
  background: snow;
  border: 1px solid snow;
  border-radius: 5px;
  height: 1000px
}
</style>